<script setup>
import {defineProps,defineEmits, ref, onMounted,watch} from "vue";
import axios from "axios";

const props = defineProps({
  dialogVisible:{
    type:Boolean,
    required: true,
  },
  bookId:{
    type:Number,
    required: true,
  }
});

/*子组件不能直接修改父组件的值,会报错:v-model cannot be used on a prop, because local prop bindings are not writable.
Use a v-bind binding combined with a v-on listener that emits update:x event instead.
const emits = defineEmits();

const handlerClose = () => {
  dialogVisible.value = false
  //父组件调用子组件的方法，关闭对话框
  emits("close",false)
}
* */

const dialogVisibleInner = ref(false)
watch(() => props.dialogVisible, (newValue) => {
  if (newValue){
    findById();
  }
})

const emits = defineEmits();

const handlerClose = () => {
  dialogVisibleInner.value = false;
  emits("close",false)
}

const book = ref({})
//根据书籍id查询书籍详情
const findById = async () => {
  try{
    const resp = await axios.post(`/book/findById/${props.bookId}`);
    book.value = resp.data
    dialogVisibleInner.value = true
  }catch (e){
    console.log('查询书籍详情出现错误',e)
  }
}

</script>

<template>
  <!-- 查看详情对话框，打开对话框调用方法 -->
  <el-dialog v-model="dialogVisibleInner" title="书籍详情" @close="handlerClose">
    <div class="dialog-content">
      <div class="book-image">
        <img :src="$urlImage + book.imgSrc" alt="书籍详情">
      </div>
      <div class="book-info">
        <h2 class="title">《{{ book.name }}》</h2>
        <p class="author">作者：{{ book.author }}</p>
        <p class="publisher">出版社：{{ book.publisher }}</p>
        <p class="price">价格：&yen;{{ book.price }}</p>
        <el-divider></el-divider>
        <p class="intro">{{ book.detail }}</p>
        <div class="button-group">
          <el-button type="warning" size="medium" icon="el-icon-shopping-cart-full">加入购物车
          </el-button>
          <el-button type="primary" size="medium" @click="handlerClose" icon="el-icon-circle-close">关闭</el-button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<style scoped>

</style>